import React from "react";
import {
  StyleSheet,
  View,
  Text,
  TouchableOpacity,
  Image,
  Alert,
} from "react-native";
import { MaterialCommunityIcons } from "@expo/vector-icons";

const bar = (props) => {
  const createDeleteAlert = () => {
    Alert.alert("提示", "你要删除该名员工吗", [
      {
        text: "取消",
        onPress: () => console.log("Cancel Pressed"),
        style: "cancel",
      },
      {
        text: "确定",
        onPress: () => {
          props.deleteCompanySupplier(props.email);
        },
      },
    ]);
  };

  return (
    <View style={[styles.Modal, styles.editModal]}>
      <View style={{ flexDirection: "row" }}>
        <Image style={styles.editImage} source={props.image}></Image>
        <View style={styles.editTextView}>
          <Text style={styles.editText}>{props.name}</Text>
          <Text style={{ color: "#a4acc0" }}>{props.email}</Text>
        </View>
      </View>
      <TouchableOpacity style={styles.editDetele} onPress={createDeleteAlert}>
        <MaterialCommunityIcons name="delete-outline" size={22} color="black" />
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  Modal: {
    backgroundColor: "#fff",
    borderRadius: 15,
    elevation: 4, //设置阴影角度，通过这个设置有无阴影
    shadowOffset: {
      // 设置阴影偏移量
      width: 0,
      height: 0,
    },
    shadowRadius: 4, // 设置阴影模糊半径
    shadowOpacity: 0.1, // 设置阴影的不透明度
    shadowColor: "gray", // 设置阴影色
  },
  editModal: {
    padding: 13,
    width: "80%",
    alignSelf: "center",
    marginBottom: 20,
    flexDirection: "row",
    justifyContent: "space-between",
  },
  editImage: { resizeMode: "contain", width: 50, height: 50 },
  editTextView: {
    marginLeft: 18,
    justifyContent: "center",
  },
  editText: {
    marginBottom: 5,
    fontSize: 16,
    fontWeight: "bold",
    color: "#636464",
  },
  editDetele: {
    justifyContent: "center",
    alignItems: "flex-end",
  },
});

export default bar;
